<template>
  <div class="top">
    <div class="img" >
      <img :src="avatar" alt="" @click="to_uindex">
      <!-- <input 
      class="input"
      type="file" 
      id="touxiang"
      name="photos"
      multiple="multiple"
      accept="image/jpg,image/jpeg,image/png,image/svg"
      @change="getFile($event)"
      >
      <label for="touxiang" class="change">更换头像</label> -->
    </div> 
    <div class="top-item" >
      <div class="item-top" v-if="nickname">{{nickname}}</div>
      <div class="item-top" v-else @click="to_user"><span>登录</span><span>/</span><span>注册</span></div>
      <div class="item-bottom">
        <p><span>个性签名：</span>{{signatrue}}</p>
      </div>
    </div>
    <div class="img" @click="to_edit">
      <img src="../../assets/img/Profile/point.svg" alt="">
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  props:{
    path:String,  
  },
  data () {
    return {  
    }
  },
  created(){  
  },
  mounted(){  
  },
  watch:{
  },
  computed:{
    userInfo(){
      return this.$store.getters.user 
      || 
      JSON.parse(localStorage.getItem('userInfo'))
    },
    //获取用户_id
    _id(){
      return (this.userInfo && this.userInfo._id) || this.$store.state.user._id
    },
    //判断用户是否登录
    isLogin(){
      return this.$store.state.isLogin && this.$store.state.isLogin || 0 
    },
    //昵称
    nickname(){
      return this.userInfo.nickname|| this.$store.getters.user.nickname ||''
    },
    //头像
    avatar(){
      return this.userInfo.avatrt || this.$store.getters.user.avatar?this.$store.getters.user.avatar :'../../assets/img/Profile/point.svg'
    },
    //签名
    signatrue () {
     return this.userInfo.signatrue|| this.$store.getters.user.signatrue ||''
    } 
  },
  methods:{
    getUserInfo(){
      
    },
    to_user(){
      this.$router.push('/login')
    },
    to_edit(){
      console.log(this.isLogin)
      if(this.isLogin){
        this.$router.push('/user_edit')
      }else{
      return alert('请先登录')
      }
      
    },
    to_uindex(){
      if(!this.isLogin){
        return alert('请先登录')
      }else{
        console.log(this._id)
      this.$router.push('/uindex/' + this._id)
      }
      
    }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top{
    /* overflow: hidden; */
    display: flex;
  }
  .top-item{
    overflow: hidden;
    font-size: 18px;
    flex: 1;
  }
  .img{
    width: 80px;
  }
  .img img{
    margin: 10px 10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .item-top{
    margin-top: 15px;
  }
  .item-bottom{
    display: flex;
    color: #666;
    
    /* height: 40px; */
  }
  .item-bottom p{
    font-size: 14px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .item-bottom img{
    margin-top: 5px;
    width: 20px;
    height: 20px;
  }
  .input{
    display: none;
  }
  .change{
    padding-left: 8px;
  }
</style>